<template>
  <div class="account-container">
    <div class="header">
      <div class="title">我的账号</div>
      <div class="header-actions">
        <div v-if="isLoggedIn" class="icon-wrapper" @click="logout">
          <van-icon name="close" size="24" />
          <div class="icon-desc">退出登录</div>
        </div>
        <div class="icon-wrapper">
          <van-icon name="question-o" size="24" />
          <div class="icon-desc">帮助</div>
        </div>
        <div class="icon-wrapper">
          <van-icon name="phone-o" size="24" />
          <div class="icon-desc">客服</div>
        </div>
        <div class="icon-wrapper">
          <van-icon name="setting-o" size="24" />
          <div class="icon-desc">设置</div>
        </div>
      </div>
    </div>

    <div class="cell-and-button-container">
      <van-cell-group>
        <van-cell v-if="!isLoggedIn" clickable @click="toLoginPage" class="custom-cell">
          <template #title>
            <div class="login-reg">
              <span class="big-text">登录·注册</span>
              <div class="desc">登录后享用所有功能</div>
            </div>
          </template>
        </van-cell>

        <van-cell v-else clickable @click="toUserPage" class="custom-cell">
          <template #title>
            <img :src="userAvatar" alt="用户头像" class="user-avatar" />
            <span class="user-name">{{ nickName }}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-button @click="goToMyHome" class="home-button">我的主页></van-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import {useUserInfoStore} from '@/stores/userInfo.js'
import {getToken,removeToken} from "@/utils/token-utils.js";

const userInfoStore = useUserInfoStore();
// 模拟登录状态（实际从存储获取）
const isLoggedIn = ref(false);
const userAvatar = ref(''); // 替换为实际头像地址
const nickName = ref('');
const token= getToken();
const router = useRouter();

onMounted(()=>{
  if (token) {
    isLoggedIn.value = true;
    nickName.value= userInfoStore.nickname;
    userAvatar.value= userInfoStore.avatar;
  }
})

// 新增的logout方法
const logout = () => {
  userInfoStore.initUserInfo();
  router.push('/login'); // 跳转到登录页或其他页面
}

// 跳转登录页
const toLoginPage = () => {
  router.push('/login');
};

// 跳转用户页
const toUserPage = () => {
};

// 跳转我的主页
const goToMyHome = () => {
};
</script>

<style scoped>
.account-container {
  padding: 20px;
  background: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 16px;
}

.icon-desc {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.cell-and-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

van-cell-group {
  flex: 1;
}

.custom-cell {
  background-color: #f5f5f5;
}

.home-button {
  background-color: #f5f5f5;
  border: none;
}

.login-reg {
  margin-bottom: 8px;
}

.big-text {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.desc {
  font-size: 16px;
  color: #666;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.user-name {
  font-size: 18px;
}
</style>
